<template>
  <section>
    <el-row :gutter="24">
      <div class="nav-letf">
        <span><el-button type="primary" @click="all" plain>全部</el-button></span>
        <span  v-for="item in typeArray"><el-button type="primary" @click="choosetype(item.type)" plain>{{item.type}}</el-button></span>
      </div>
      <div class="nav-right">
        <el-row>
          <el-col :span="6">
            <el-button @click="upShelves()">上架</el-button>
            <el-button @click="downShelves()">下架</el-button>
            <el-button @click="delmoreGoods()">删除</el-button>
          </el-col>
          <el-col :span="6">
            <el-select v-model="value" placeholder="请选择" @change="option">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" ></el-option>
            </el-select>
          </el-col>
          <el-col :span="6"><el-input v-model="input" placeholder="请输入内容"></el-input></el-col>
          <el-button icon="el-icon-search" @click="search" circle></el-button>
        </el-row>
        <el-table :data="tableData" style="width: 100%"  @selection-change="allshelves" v-loading="loading">
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column prop="goodName" label="产品" > </el-table-column>
          <el-table-column prop="goodsfile" label="图片" width="180">
            <template slot-scope="scope">
              <img  :src="scope.row.goodsfiles[0]" alt="" style="width: 200px;height: 100px">
            </template>
          </el-table-column>
          <el-table-column prop="costPrice" label="价钱" > </el-table-column>

          <el-table-column>
            <template slot-scope="scope"  >
              <el-button  size="mini"  @click=" shelves(scope.$index, scope.row)">{{scope.row.shelves ? "下架" : "上架"}}</el-button>
              <el-button  size="mini"  @click=" handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-row>
    <div class="block">
       <el-pagination background @current-change="handleCurrentChange" layout="total, prev, pager, next" :total="count"> </el-pagination>
    </div>

  </section>
</template>

<script>
  import axios from "axios"

  export default {
        data() {
            return {
                tableData: [],
                typeArray:[],
                page:1,
                count:0,
                type:'',
                shelvesArry:[],
                input:"",
                loading: true,
                options: [{label:"全部状态", value: '',}, { label: '上架中',value: true}, { label: '已下架',value: false}],
                value: ''
              }
        },
        mounted(){
            this.init();
            this.gettype();
        },
        methods: {
            init(){
              let param ={
                  page:this.page,
                  pageSize:10,
                  type:this.type,
                  shelves:this.value,
                  goodName:this.input,
              }
                axios.get("/goodslist/getGoods",{
                  params:param
                }).then((response)=>{
                    let res = response.data;
                    if (res.status == "0"){
                      this.tableData = res.result.list;
                      this.count = res.result.count;
                      this.loading = false;
                    }
                })
            },
            all(){
              this.value = "";
              this.type = "";
              this.input = "";
              this.init();
            },
            gettype(){
               axios.get("/typelist/getType").then((response)=>{
                 let res = response.data;
                 this.typeArray = res.result.list;
               })
            },
            handleEdit(index,row){
              // console.log(index)
              // console.log(row._id)
              this.$router.push({path:'/goodsCenter/editGoods.vue',query:{row:row}})

            },
            handleDelete(index,row) {
                axios.post("/goodslist/delGoods",{
                  id:row._id
                }).then((ress)=>{
                  let res = ress.data;
                  if(res.status == "0"){
                    this.init();
                  }else{

                  }
                })
            },
            choosetype(type){
              this.page = 1;
              this.type = type;
              this.init();
            },
            allshelves(index,row) {
              // console.log(index)
              // console.log(row)
              let shelvesArr = [];

              // console.log(index instanceof Array)
              // if (index instanceof Array){
              //}
              index.forEach((val,int)=>{
                shelvesArr[int] = val._id;
              })
              this.shelvesArry = shelvesArr;

            },
           //一个上下架
            shelves(index,row){
              let shelvesArr = [];
              shelvesArr[0] = row._id;
              let isShelves = !row.shelves;

              // this.shelvesArry = shelvesArr;

              axios.post("/goodslist/editShelves",{
                page:this.page,
                pageSize:10,
                type:this.type,
                shelves:shelvesArr,
                isShelves: isShelves
              }).then((ress)=>{
                let res = ress.data;
                if(res.status == "0"){
                  this.init();
                }else{

                }
              })
            },
           //一批上下架
            upShelves(){
              axios.post("/goodslist/editShelves",{
                  page:this.page,
                  pageSize:10,
                  type:this.type,
                  shelves:this.shelvesArry,
                  isShelves: true
              }).then((ress)=>{
                let res = ress.data;
                if(res.status == "0"){
                  this.init();
                }else{

                }
              })
            },
            downShelves(){
              axios.post("/goodslist/editShelves",{
                page:this.page,
                pageSize:10,
                type:this.type,
                shelves:this.shelvesArry,
                isShelves: false
              }).then((ress)=>{
                let res = ress.data;
                if(res.status == "0"){
                  this.init();
                }else{

                }
              })
            },
            handleCurrentChange(val) {
              this.page = val;
              this.init()
            },
            search(){
              // axios.post("/goodslist/getOneGoods",{
              //    goodName:this.input
              // }).then((response)=>{
              //   let res = response.data;
              //   this.tableData = res.result.list;
              // })
              this.init();
            },
            option(){
              this.init()
            },
            delmoreGoods(){
              // console.log(this.count);
              // console.log();
              let list = this.count % 10;
              // console.log(list)
              // console.log(this.shelvesArry.length);
              if(list == 0){
                list = 10
              }
              if(list == this.shelvesArry.length){
                 this.page = this.page - 1;
              }

              axios.post("/goodslist/delmoreGoods",{
                shelves:this.shelvesArry,
              }).then((ress)=>{
                let res = ress.data;
                if(res.status == "0"){
                  this.init();
                }else{

                }
              })
            }
        }
    }


</script>

<style  lang="scss" scoped>
  .nav-letf{
    width: 100px;
    display: inline-block;
    margin-right: 10px;
    margin-top: 10px;
  }
  .nav-right{
    width: calc(100% - 120px);
    display: inline-block;
    vertical-align: top;
  }
  .nav-list   {
    height: 40px;
    display: block;
    width: 100%;
    text-align: center;
    line-height: 40px;
    border:1px solid aliceblue;
    border-radius: 8px;
  }
  .nav-list:hover{
    background:#20a0ff;
    color: #fff;
  }

  .el-row{
    margin-top: 10px;
  }

  .nav-letf .el-button{
    width: 100% ;
    padding: 0;
    height: 40px;
    margin-bottom: 10px;
  }
</style>
